<template>
  <div :class="['pui-radio', block && 'block', border && 'border']" @click="handleChange()">
    <div :class="['pui-radio_content', disabled && 'disabled', checked && 'active-item']">
      <div :class="['pui-radio_frame']">
        <span class="pui-radio_checked" v-if="checked"></span>
      </div>
      <div class="pui-radio_label">{{ data.label }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-radio',
});
</script>

<script setup lang="ts">
import type { Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  size: 'normal',
  disabled: false,
  border: false,
  block: false,
  checked: false,
});
const emits = defineEmits<{
  onChange: [val: string];
}>();

const handleChange = () => {
  if (props.disabled) return;
  emits('onChange', props.data.value);
};
</script>
